<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css">
	<link rel="stylesheet" href="<%=basePath %>css/mystyle.css">
	<link rel="stylesheet" href="<%=basePath %>css/datePicker.css">
	<link rel="stylesheet" href="<%=basePath %>css/style.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/jquery.autocomplete.css"  />
	<title></title>
</head>
<body>
	<jsp:include page="../include/top.jsp"/>

	<div class="container" style="margin-top:100px">
		<div class="row">
			<div class="span2">
				<jsp:include page="../include/left.jsp">
					<jsp:param value="contact" name="tag"/>
				</jsp:include>
			</div>
			<div class="span7" style="margin:0px">

				<div class="well">
					<div class="header">
						<h4 style="display:inline" id="way">编辑客户</h4>
					</div>
					
					<div class="liner">

						    <form class="form-horizontal" action="<%=basePath%>contact/updateContact.action" method="post" id="myform">
						    	<input type="hidden" name="contact.id" value="${contact.id }"/> 
						    	<input type="hidden" name="contact.type" value="${contact.type }"/> 

							    <table class="tables">
							    	<c:choose>
							    		<c:when test="${contact.type == '公司' }">
							    			<tr>
									    		<td class="changes-left">公司名称</td>
									    		<td class="adds">
									    			<input type="text" class="span5" name="contact.company" value="${contact.name }">
									    		</td>
									    	</tr>
							    		</c:when>
							    		
							    		<c:otherwise>
							    			<tr>
									    		<td class="changes-left">姓名</td>
									    		<td class="adds">
									    			<input type="text" class="span5" name="contact.name" value="${contact.name }">
									    		</td>
									    	</tr>
									    	
									    	<tr>
									    		<td class="changes-left">公司</td>
									    		<td class="adds">
									    			<c:choose>
									    				<c:when test="${! empty contact.company }">
									    					<input type="text" class="span5" id="company" name="contact.company" value="${contact.company }">
									    				</c:when>
									    				<c:otherwise>
									    					<a href="javascript:;" class="change-company" >添加公司</a>
									    				</c:otherwise>
									    			</c:choose>
									    			
									    		</td>
									    	</tr>
		
									    	<tr>
									    		<td class="changes-left">职位</td>
									    		<td class="adds">
									    			<c:choose>
									    				<c:when test="${! empty contact.position }">
									    					<input type="text" name="contact.position" class="input-position span5" value="${contact.position }">
									    				</c:when>
									    				
									    				<c:otherwise>
									    					<a href="javascript:;" class="change-position" >添加职位</a>
									    				</c:otherwise>
									    			</c:choose>
									    			
									    		</td>
									    	</tr>
							    		</c:otherwise>
							    	</c:choose>
									
									<tr>
							    		<td class="change-left">
							    			<span >电话</span>
							    		</td>
							    		<td class="add">
							    			
							    			<c:forEach items="${contact.phonelist }" var="phone">
							    				<div class="add-phone">
													<input type="text" name="phone.name" class="input-phone" value="${phone.name }">
													<select name="phone.type"  style="width:90px;margin-left:5px" class="select-val">
														<option >${phone.type }</option>
													</select>
													<input type="hidden" name="phone.id"  value="${phone.id }" class="oldid">
													<a href="javascript:;" class="del del-phone"><img src="<%=basePath %>img/del.png" ></a>
												</div>
							    			</c:forEach>
							    			<a href="javascript:;" class="change-phone">添加另一个电话</a>
							    		</td>
							    	</tr>

							    	<tr>
							    		<td class="change-left">
							    			<span>电子邮件</span>
							    		</td>
							    		<td class="add">
							    			
							    			<c:forEach items="${contact.emaillist }" var="email">
							    				<div class="add-email">
							    					
													<input type="text" name="email.name" class="input-email" value="${email.name }">
													<select name="email.type"  style="width:90px;margin-left:5px" class="select-val">
														<option >${email.type }</option>
													</select>
													<input type="hidden" name="email.id"  value="${email.id }" class="oldid">
													<a href="javascript:;" class="del del-email"><img src="<%=basePath %>img/del.png" ></a>
												</div>
							    			</c:forEach>
							    			
							    			<a href="javascript:;" class="change-email">添加一个电子邮件</a>
							    			
							    		</td>
							    	</tr>

							    	<tr>
							    		<td class="change-left">
							    			<span>即时通信</span>
							    		</td>
							    		<td class="add">
							    			
							    			<c:forEach items="${contact.imlist }" var="im">
							    				<div class="add-im">
													<input type="text" name="im.account" class="input-im" value="${im.account }">
													<select name="im.kind"  style="width:90px;margin-left:5px" class="select-val">
														<option >${im.kind }</option>
													</select>
													<select name="im.type"  style="width:90px;margin-left:5px" class="select-val">
														<option >${im.type }</option>
													</select>
													<input type="hidden" name="im.id"  value="${im.id }" class="oldid">
													<a href="javascript:;" class="del del-im"><img src="<%=basePath %>img/del.png" ></a>
												</div>
							    			</c:forEach>
							    			
							    			<a href="javascript:;" class="change-im">添加一个即时通信</a>
							    			
							    		</td>
							    	</tr>

							    	<tr>
							    		<td class="change-left">
							    			<span>网址</span>
							    		</td>
							    		<td class="add">
							    			
							    			<c:forEach items="${contact.websitelist }" var="website">
							    				<div class="add-website">
													<input type="text" name="website.name" class="input-website" value="${website.name }">
													<select name="website.type"  style="width:90px;margin-left:5px" class="select-val">
														<option >${website.type }</option>
													</select>
													<input type="hidden" name="website.id"  value="${website.id }" class="oldid">
													<a href="javascript:;" class="del del-website"><img src="<%=basePath %>img/del.png" ></a>
												</div>
							    			</c:forEach>
							    			
							    			<a href="javascript:;" class="change-website">添加一个网址</a>
							    			
							    		</td>
							    	</tr>

							    	<tr>
							    		<td class="change-left">
							    			<span>地址</span>
							    		</td>
							    		<td class="add">
							    			
							    			<c:forEach items="${contact.addresslist }" var="address">
							    				<div class="add-address">
									    					<select name="address.country" id=""  class="country" style="width:180px;margin-left:5px;margin-bottom:10px">
																<option class="default" >${address.country }</option>
															</select>
																
							    					
									    			
									    			<c:if test="${address.state != 'none' }">
									    				<select name="address.state" id="" class="state" style="width:100px;margin-left:5px;margin-right:150px;margin-bottom:10px">
															<option class="default" value="none">${address.state}</option>
														</select>
									    			
									    			</c:if>
									    			
									    			<c:if test="${address.city != 'none' }">
										    			<select name="address.city" id="" class="city" style="width:100px;margin-left:5px;margin-bottom:10px">
															<option class="default" value="none">${address.city}</option>
														</select>
									    			
									    			</c:if>
									    			
									    			<c:if test="${address.region != 'none' }">
									    				<select name="address.region" id="" class="region" style="width:100px;margin-left:5px;margin-bottom:10px">
															<option class="default" value="none">${address.region}</option>
														</select>
									    			</c:if>
													<select name="address.type"  style="width:90px;margin-left:5px;margin-bottom:10px" class="select-val">
														<option >${address.type }</option>
													</select>
													<input type="hidden" name="address.id"  value="${address.id }" class="oldid">
													<a href="javascript:;" class="del del-address"><img src="<%=basePath %>img/del.png"  style="margin-bottom:10px"></a>
												</div>
												<br/>
							    			</c:forEach>
							    			
							    			<a href="javascript:;" class="change-address">添加一个地址</a>
							    		</td>
							    	</tr>
							    	
							    	<tr>
							    		<td class="change-left" style="padding-bottom:0px;padding-top:30px;font-size:12px;color: #999999;">
							    			<span>社交网络</span>
							    		</td>
							    		<td class="add">
							    		</td>
							    	</tr>
							    	
							    	<tr>
							    		<td class="change-left">
							    			<span>QQ空间</span>
							    		</td>
							    		<td class="add">
							    			<input type="text" class="span5" name="contact.qqroom" value="${contact.qqroom }">
							    		</td>
							    	</tr>

							    </table>
							    
							    <div class="contact-bottom">
									<div class="bottom-inner">
										背景信息<span class="bg-info">(简介，如何认识的等)</span>
										<textarea name="contact.background" id="" cols="30" rows="3" class="span6" >${contact.background }</textarea>
									</div>
									
									<div class="bottom-inner">
										<span >谁能看到这些客户?</span>
										<c:choose>
											<c:when test="${contact.views == cur_user.id }">
												<input type="hidden" id="views" name="contact.views"/>
												<label class="radio" style="font-size:12px;margin-top:10px">
													<input type="radio" name="views" class="views" value="all" >
													所有的人
													</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="${cur_user.id }" checked="checked">
													只有我
												</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="我和以下这些人">
													我和以下这些人
												</label>
												<div id="other" ></div>
											
											</c:when>
											
											<c:when test="${fn:contains(contact.views,',')}">
												<input type="hidden" id="views" name="contact.views"/>
												<label class="radio" style="font-size:12px;margin-top:10px">
													<input type="radio" name="views" class="views" value="all" >
													所有的人
													</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="${cur_user.id }">
													只有我
												</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="我和以下这些人" checked="checked">
													我和以下这些人
												</label>
												<div id="other" >
													<c:forEach items="${contact.viewname }" var="name">
														<hr style="border:0px;margin:1px 0px"/>
														<select  class="others"  style="width:100px;margin:0px">
																<option value="${name }">${name }</option>
														</select>
														<a href="javascript:;" class="delother" ><img src="<%=basePath%>img/del1.png"/></a>
																					
													</c:forEach>
													<a href="javascript:;" class="addother" ><img src="<%=basePath%>img/plus1.png"/></a>
												
												</div>
											
											</c:when>
											
											<c:otherwise>
												<input type="hidden" id="views" name="contact.views"/>
												<label class="radio" style="font-size:12px;margin-top:10px">
													<input type="radio" name="views" class="views" value="all" checked="checked">
													所有的人
													</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="${cur_user.id }">
													只有我
												</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="我和以下这些人">
													我和以下这些人
												</label>
												<div id="other" ></div>
											</c:otherwise>
											
										</c:choose>
										
										<div style="margin-top:30px">
											<button class="btn btn-success" type="button" id="save">保存</button>&nbsp;或
											<a href="#" style="color:red">取消</a>
										</div>
										
											
									</div>
									
								</div>
							    
						    </form>
					</div>
					
					
				</div>
			</div>
			
			<div class="span3">
				<div class="well" style="margin-top:30px;">
					<div class="right-liner">
						
						

					</div>
				</div>
				
			</div>
			
		</div>
	</div>

	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.autocomplete.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/date.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.datePicker.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		
		 $(function() {
             var data = "${companys}".split(",");
 
             $("#company").autocomplete(data).result(function(event, data, formatted) {
                $(this).val(data);
                
             });
         });
         
         //改变头部新建任务的标题
		$(".topnewtask").click(function(){
			$(".toptitle").text("为${contact.name }添加新任务");
		});
		
		//保存任务
			$(".savetask").live("click",function(){
				$(this).hide();
				$(this).next().show();
				var content = $(".taskcontent").val();
				var time = $(".time").val();
				var taskuserid = $(".taskuserid").val();
				var category = $(".category").val();
				var views = null;
				if($(".taskviews").attr("checked")) {
					views = "all";
				}
				var $task = $(this).parent().parent().parent();
							
				$.post("<%=basePath%>task/saveTask.action",{
					"task.content" : content,
					"task.time":time,
					"task.user.id":taskuserid,
					"task.category":category,
					"task.views" : views,
					"task.type" : "${contact.type}",
					"task.typeid" : "${contact.id}"
					},function(){
						//保存成功后清除所有记录
						$("#top").empty();
						$task.hide();
				});
			});
         
         
         //我和一下这些人(还没有解决选择重复用户的问题)
		$(".others").live("change",function(){
			var v = $(this).val();
			
			$(this).empty();
			$(this).append("<option >"+v+"</option>");
			$(this).next().show();
			$(this).next().next().show();
			
		});
		
		//添加选择其他人选项
		function createHTML(){
			var html = "<hr style=\"border:0px;margin:1px 0px\"/><select  class=\"others\"  style=\"width:100px;margin:0px\">";
			html += "<option >选择其他人</option>";
			<c:forEach items="${userList}" var="user">
				html += "<option value=\"${user.username }\">${user.username }</option>";
			</c:forEach>
			html += "</select>";
			html += "<a href=\"javascript:;\" class=\"delother\" style=\"display:none\"><img src=\"<%=basePath%>img/del1.png\"/></a>";
			html += "<a href=\"javascript:;\" class=\"addother\" style=\"display:none\"><img src=\"<%=basePath%>img/plus1.png\"/></a>";
			return html;
		}
		
		//添加其他人
		$(".addother").live("click",function(){
			var html = createHTML();
			$(this).parent().append(html);
			$(this).remove();
		});
		
		//删除其他人
		$(".delother").live("click",function(){
			var v = $(this).prev().val();
			
			$(this).prev().remove();
			$(this).prev().remove();
			
			var length = $(this).parent().children().length;
			if(length == 2){
				var html = createHTML();
				$(this).parent().append(html);
				$(this).next().remove();
			} else {
				if($(this).next().hasClass("addother")){
					$(this).before("<a href=\"javascript:;\" class=\"addother\"><img src=\"<%=basePath%>img/plus1.png\"/></a>");
					$(this).next().remove();
				}
			}
			
			$(this).remove();
		});
         
         
         
			
			//select2权限
			//$("#others").select2();
			$("#save").click(function(){
			
				var views = $(".views:checked").val();
				
				if(views == "我和以下这些人") {
					var v = "${cur_user.username}";
					$(".others").each(function(){
						if($(this).val() == "选择其他人"){
							v = v;
						} else {
							v += "," + $(this).val();
						}
						
					});
					views = v;
				}
				$("#views").val(views);
				
				
				$("#myform").submit(); 
			});
			
			
			var v = $(".views").eq(2).attr("checked");
			if(v == "checked" ) {
				$("#other").show();
			} 
			
			$(".views").click(function(){
				if($(this).val() == "我和以下这些人") {
					if($("#other").length == 1) {
						var html = createHTML();
						$("#other").append(html);
					}
				} else {
					$("#other").hide();
				}
			}); 
			
			//添加职位
			$(".change-position").live("click",function(){
				$(this).replaceWith("<input type=\"text\" name=\"contact.position\" class=\"input-position span5\">");
				$(".input-position").focus();
			});
			
			//添加公司
			$(".change-company").live("click",function(){
				$(this).replaceWith("<input type=\"text\" name=\"contact.company\" class=\"input-company span5\">");
				$(".input-company").focus();
			});
			

			$(".del").live("mouseover",function(){
				$(this).children().attr("src","<%=basePath %>img/del-active.png");
			});
			$(".del").live("mouseout",function(){
				$(this).children().attr("src","<%=basePath %>img/del.png");
			});

			/*$("body:not(.add)").live("mousedown",function(){

				if($(".input-position").val() == "" ) {
					$(".input-position").replaceWith("<a href=\"javascript:;\" class=\"change-position\">添加职位</a>")
				}

				if($(".input-phone").val() == "" ) {
					
					$(".add-phone").replaceWith("<a href=\"javascript:;\" class=\"change-phone\">添加一个电话</a>");
				}

				if($(".input-email").val() == "") {
					$(".add-email").replaceWith("<a href=\"javascript:;\" class=\"change-email\">添加一个电子邮件</a>");
				}

				if($(".input-im").val() == "") {
					$(".add-im").replaceWith("<a href=\"javascript:;\" class=\"change-im\">添加一个即时通信</a>");
				}

				if($(".input-website").val() == "") {
					$(".add-website").replaceWith("<a href=\"javascript:;\" class=\"change-website\">添加一个网址</a>");
				}

			});*/

			

			//添加新电话
			$(".change-phone").live("click",function(){
				var html = "<div class=\"add-phone\">";
				html += "<input type=\"hidden\" name=\"phone.id\" class=\"input-phone\" value=\"none\"> ";
				html += "<input type=\"text\" name=\"phone.name\" class=\"input-phone\">";
				html += "<select name=\"phone.type\" id=\"\" style=\"width:90px;margin-left:5px\" class=\"select-val\">";
				html += "<option >工作</option>";
				html += "<option >手机</option>";
				html += "<option >家庭</option>";
				html += "<option >其他</option>";
				html += "</select>";
				html += "<a href=\"javascript:;\" class=\"del del-phone\"><img src=\"<%=basePath %>img/del.png\" ></a>";
				html += "</div>";

				var $add = $(this).parent();

				$(this).replaceWith(html);
				$(".input-phone").focus();

			});

			$(".input-phone").live("keyup",function(){
				$(".change-phone").remove();
				$(this).parent().after("<a href=\"javascript:;\" class=\"change-phone\">添加另一个电话</a>");
			});
			
			//删除电话(如果是数据库中就有的,点击时异步的删除数据库中的数据)
			$(".del-phone").live("click",function(){
				
				if($(this).prev().hasClass("oldid")) {
					var id = $(this).prev().val();
					
					$.post("<%=basePath%>contact/delPhone.action",{"id":id});
				}
				
				var next = $(this).parent().next().hasClass("add-phone");
				if(next) {
					$(this).parent().remove();
				} else {
					$(".change-phone").remove();
					var num = $(this).parent().parent().children().length;
					if(num == 1) {
						$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-phone\">添加一个电话</a>");
					}
					
					$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-phone\">添加另一个电话</a>");
				}
				
				
			});

			//添加电子邮件
			$(".change-email").live("click",function(){
				var html = "<div class=\"add-email\">";
				html += "<input type=\"hidden\" name=\"email.id\" class=\"input-email\" value=\"none\">";
				html += "<input type=\"text\" name=\"email.name\" class=\"input-email\">";
				html += "<select name=\"email.type\" id=\"\" style=\"width:90px;margin-left:5px\">";
				html += "<option >工作</option>";
				html += "<option >家庭</option>";
				html += "<option >其他</option>";
				html += "</select>";
				html += "<a href=\"javascript:;\" class=\"del del-email\"><img src=\"<%=basePath %>img/del.png\" ></a>";
				html += "</div>";

				$(this).replaceWith(html);
				$(".input-email").focus();

			});

			$(".input-email").live("keyup",function(){
				$(".change-email").remove();
				$(this).parent().after("<a href=\"javascript:;\" class=\"change-email\">添加另一个电子邮件</a>");
			});

			$(".del-email").live("click",function(){
			
				if($(this).prev().hasClass("oldid")) {
					var id = $(this).prev().val();
					
					$.post("<%=basePath%>contact/delEmail.action",{"id":id});
				}
			
				var next = $(this).parent().next().hasClass("add-email");
				if(next){
					$(this).parent().remove();
				} else {
					$(".change-email").remove();
					var num = $(this).parent().parent().children().length;
					if(num == 1) {
						$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-email\">添加一个电子邮件</a>");
					}
					$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-email\">添加另一个电子邮件</a>");
				
				}
				
			});

			//添加即时通信
			$(".change-im").live("click",function(){
				var html = "<div class=\"add-im\">";
				html += "<input type=\"hidden\" name=\"im.id\" class=\"input-im\" value=\"none\">";
				html += "<input type=\"text\" name=\"im.account\" class=\"input-im\">";
				html += "<select name=\"im.kind\" id=\"\" style=\"width:90px;margin-left:5px\">";
				html += "<option >QQ</option>";
				html += "<option >MSN</option>";
				html += "<option >goole talk</option>";
				html += "</select>";
				html += "<select name=\"im.type\" id=\"\" style=\"width:90px;margin-left:5px\">";
				html += "<option >工作</option>";
				html += "<option >个人</option>";
				html += "<option >其他</option>";
				html += "</select>";
				html += "<a href=\"javascript:;\" class=\"del del-im\"><img src=\"<%=basePath %>img/del.png\" ></a>";
				html += "</div>";

				var $add = $(this).parent();

				$(this).replaceWith(html);
				$(".input-im").focus();

			});

			$(".input-im").live("keyup",function(){
				$(".change-im").remove();
				$(this).parent().parent().append("<a href=\"javascript:;\" class=\"change-im\">添加另一个即时通信</a>");
			});

			$(".del-im").live("click",function(){
			
				if($(this).prev().hasClass("oldid")) {
					var id = $(this).prev().val();
					
					$.post("<%=basePath%>contact/delIm.action",{"id":id});
				}
			
				var next = $(this).parent().next().hasClass("add-im");
				
				if(next) {
					$(this).parent().remove();
				} else {
					$(".change-im").remove();

					var num = $(this).parent().parent().children().length;
					if(num == 1) {
						$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-im\">添加一个即时通信</a>");
					}
					$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-im\">添加另一个即时通信</a>");
				}
				
				
			});

			//添加网站
			$(".change-website").live("click",function(){
				var html = "<div class=\"add-website\">";
				html += "<input type=\"hidden\" name=\"website.id\" class=\"input-website\" value=\"hidden\">";
				html += "<input type=\"text\" name=\"website.name\" class=\"input-website\">";
				html += "<select name=\"website.type\" id=\"\" style=\"width:90px;margin-left:5px\">";
				html += "<option >工作</option>";
				html += "<option >个人</option>";
				html += "<option >其他</option>";
				html += "</select>";
				html += "<a href=\"javascript:;\" class=\"del del-website\"><img src=\"<%=basePath%>img/del.png\" ></a>";
				html += "</div>";

				var $add = $(this).parent();

				$(this).replaceWith(html);
				$(".input-website").focus();

			});

			$(".input-website").live("keyup",function(){
				$(".change-website").remove();
				$(this).parent().parent().append("<a href=\"javascript:;\" class=\"change-website\">添加另一个网址</a>");
			});

			$(".del-website").live("click",function(){
			
				if($(this).prev().hasClass("oldid")) {
					var id = $(this).prev().val();
					
					$.post("<%=basePath%>contact/delWebsite.action",{"id":id});
				}
			
				var next = $(this).parent().next().hasClass("add-website");
				if(next) {
					$(this).parent().remove();
				} else {
					$(".change-website").remove();

					var num = $(this).parent().parent().children().length;
					if(num == 1) {
						$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-website\">添加一个网址</a>");
					}
					$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-website\">添加另一个网址</a>");
				}
			
				
			});
			
			//添加地址
			
			$(".change-address").live("click",function(){
				var html = "<div class=\"add-address\" style=\"margin-top:10px\">";
				html += "<input type=\"hidden\" name=\"address.id\"  value=\"none\">";
				html += "<select name=\"address.country\"  class=\"country\" style=\"width:180px;margin-left:5px;margin-bottom:10px\">";
				html += "<option class=\"default\" value=\"none\">--选择国家--</option>";
				<c:forEach items="${countryList }" var="v">
				html += "<option value=\"${v.id }\">${v.name }</option>";
				</c:forEach>
				html += "</select>";
				
				html += "<select name=\"address.state\"  class=\"state\" style=\"width:100px;margin-left:5px;margin-right:150px;margin-bottom:10px\">";
				html += "<option class=\"default\" value=\"none\">--选择省--</option></select>";
				html += "<select name=\"address.city\"  class=\"city\" style=\"width:100px;margin-left:5px;margin-bottom:10px\">";
				html += "<option class=\"default\" value=\"none\">--选择市--</option></select>";
				
				html += "<select name=\"address.region\" class=\"region\" style=\"width:100px;margin-left:5px;margin-bottom:10px\">";
				html += "<option class=\"default\" value=\"none\">--选择县--</option></select>";
				
				html += "<select name=\"address.type\" id=\"\" style=\"width:90px;margin-left:5px;margin-bottom:10px\">";
				html += "<option >工作</option>";
				html += "<option >个人</option>";
				html += "<option >其他</option>";
				html += "</select>";
				html += "<a href=\"javascript:;\" class=\"del del-address\"><img src=\"<%=basePath %>img/del.png\" style=\";margin-bottom:10px\"></a>";
				html += "</div>";
				html += "<a href=\"javascript:;\" class=\"change-address\" style=\"margin-left: 5px;\">添加另一个地址</a>";

				$(this).replaceWith(html);

			});


			$(".del-address").live("click",function(){
				
				if($(this).prev().hasClass("oldid")) {
					var id = $(this).prev().val();
					
					$.post("<%=basePath%>contact/delAddress.action",{"id":id});
				}
			
				var next = $(this).parent().next().hasClass("add-address");
				if(next) {
					$(this).parent().remove();
				} else {
					$(".change-address").remove();

					var num = $(this).parent().length;
					if(num == 1) {
						$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-address\">添加一个地址</a>");
					}
					$(this).parent().replaceWith("<a href=\"javascript:;\" class=\"change-address\">添加另一个地址</a>");
				}
				
				
			});
			

			//ajax动态添加省市级联
			$(".country").live("change",function(){
				
				var $country = $(this);
				$country.next().children().not(".default").remove();
				$country.next().next().children().not(".default").remove();
				$country.next().next().next().children().not(".default").remove();
				
				
				var countryid = $(this).val();
				if(countryid != "--选择国家--") {
					$.post("state.action",{"id":countryid}, function(date){
					//层层解析
						var result = $(date).find("result");
						var states = $(result).find("state").length;
						
						$(result).find("state").each(function(){
							$country.next().length = 1;
							var stateid = $(this).attr("id");
							var satename = $(this).attr("name");
							
							if((satename == "null") && stateid != null ) {
								
								$.post("city.action",{"id":stateid},function(date){
									var result = $(date).find("result");
									$(result).find("city").each(function(){
										var cityid = $(this).attr("id");
										var cityname = $(this).attr("name");
										
										$country.next().next().append("<option value="+cityid+">"+cityname+"</option>");
									});
								});
							} else if(satename != "null" && stateid != null){
								$country.next().append("<option value="+stateid+">"+satename+"</option>");
							}
							
							
							
						});
						
					});
				}
			});
			
			$(".state").live("change",function(){
				$(this).next().children().not(".default").remove();
				
				var $state = $(this);
				
				var stateid = $state.val();
				if(stateid != "--选择省--") {
					$.post("city.action",{"id":stateid},function(date){
						var result = $(date).find("result");
						$(result).find("city").each(function(){
							var cityid = $(this).attr("id");
							var cityname = $(this).attr("name");
							$state.next().append("<option value="+cityid+">"+cityname+"</option>");
						});
					});
				}
			});
			
			$(".city").live("change",function(){
				$(this).next().children().not(".default").remove();
				
				var $city = $(this);
				
				var cityid = $city.val();
				if(cityid != "--选择市--") {
					$.post("region.action",{"id":cityid},function(date){
						var result = $(date).find("result");
						
						$(result).find("region").each(function(){
							var regionid = $(this).attr("id");
						var regionname = $(this).attr("name");
						$city.next().append("<option value="+regionid+">"+regionname+"</option>");
						
						});
						
					});
				}
			});
			
		});
	</script>
</body>
</html>